import React, { PropTypes } from 'react';
import s from './menu.css';
import classNames from 'classnames';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import { Col } from 'react-bootstrap';
import Link from '../../components/Link';

class Menu extends React.Component {

  static propTypes = {
    menus: PropTypes.array.isRequired,
    selectedMenu: PropTypes.array.isRequired,
    selectedSubmenu: PropTypes.array.isRequired,
  };

  constructor(props) {
    super(props);


    this.state = {
      activeMenuKey: 0,
    };
  }

  _onSelectedMenu(menuKey, submenuKey) {
    this.setState({ hide: true });
    this.props.onSelectedMenu(menuKey, submenuKey);
  }

  _handleMore() {
    this.setState({ hide: !this.state.hide });
  }

  _handleOverlay() {
    this.setState({ hide: !this.state.hide });
  }

  build() {
    if (this.props.menus && this.props.selectedMenuKey) {
      const nodes = [];
      nodes.push((
        <li className={s.menu_item}>
          <Link to="/">首页</Link>
        </li>
        ));
      this.props.menus.forEach((menu, index) => {
        if (menu.submenus && menu.submenus.length > 0) {
          nodes.push(this.buildOptionButton(index, menu));
        } else {
          nodes.push(this.buildDefaultButton(index, menu));
        }
      });

      return (nodes);
    }
    return (<div />);
  }

  buildDefaultButton(index, menu) {
    return this.props.selectedMenuKey === menu.key ?
      (<li className={s.menu_item} key={index}>
        <a className={s.active} onClick={this._onSelectedMenu.bind(this, menu.key)}>{menu.value}</a>
      </li>
      ) : (
        <li className={s.menu_item} key={index}>
          <a key={index} onClick={this._onSelectedMenu.bind(this, menu.key)}>{menu.value}</a>
        </li>
      );
  }

  buildOptionButton(index, menu) {
    const submenusNodes = [];
    const submenus = menu.submenus || [];

    if (submenus && submenus.length > 0) {
      submenus.forEach((submenu) => {
        submenusNodes.push(this.props.selectedSubmenuKey === submenu.key ? (
          <li className={s.submenu_item} key={submenu._id}>
            <a className={s.active} onClick={this._onSelectedMenu.bind(this, menu.key, submenu.key)}>
              {submenu.value}
            </a>
          </li>)
        : (
          <li className={s.submenu_item} key={submenu._id}>
            <a onClick={this._onSelectedMenu.bind(this, menu.key, submenu.key)}>
              {submenu.value}
            </a>
          </li>));
      });
    }

    return (
      <div>
        <li className={s.menu_item}>
          <a>{menu.value}</a>
        </li>
        <ul className={s.submenu_item_list}>
          {submenusNodes}
        </ul>
      </div>
    );
  }

  render() {
    return (
      <ul className={s.menu}>
        {this.build()}
      </ul>
    );
  }
}

export default withStyles(s)(Menu);
